<template>
  <fragment>
    <!--消息栏气泡窗-->
    <el-popover ref="popover_msg" placement="bottom-end" width="260" v-model="expand">
      <el-row class="text-small">
        <el-col :span="24" class="border-bottom" style="text-align: left;">
          您有 {{ total }} 条消息
        </el-col>

        <el-col v-for="(item, idx) in notice" :key="idx" :span="24"
                class="text-box box-small with-border" @click="openMessagePanel(item)">
          <span :class="'box-circle ' + item.background">
            <i :class="item.icon"></i>
          </span>
          <article>
            <h6>{{ item.title }}</h6>
            <p>{{ item.content }}</p>
          </article>
        </el-col>

        <el-col :span="24" style="text-align: right; margin-top: 5px">
          <a @click="openNoticePanel">前往查看 ></a>
        </el-col>
      </el-row>
    </el-popover>

    <!--消息栏-->
    <el-row class="sea-toolbar-button" v-popover:popover_msg style="float:right;">
      <i class="fa fa-fw fa-bell-o"></i>
      <span class="bg-red badge" style="position:absolute; left: 6px;top: 8px">1</span>
      <span>消息</span>
    </el-row>
  </fragment>
</template>

<script>
/**
 * 消息窗
 */
export default {
    name: "message",
    data() {
        return {
            // 是否展开消息栏
            expand: false,
            notice: [{
                background: 'bg-aqua',
                icon: 'fa fa-user-circle',
                title: 'This is a new message!',
                content: 'good good study day day up'
            }, {
                background: 'bg-orange',
                icon: 'fa fa-plus',
                title: 'This is a new message!',
                content: 'good good study day day up'
            }, {
                background: 'bg-green',
                icon: 'fa fa-newspaper-o',
                title: 'This is a new message!',
                content: 'good good study day day up'
            }, {
                background: 'bg-red',
                icon: 'fa fa-database',
                title: 'This is a new message!',
                content: 'good good study day day up'
            }],
            total: 4
        }
    }, created() {
    }, methods: {
        /**
         * 查询通知面板
         */
        openNoticePanel: function () {

        },
        /**
         * 查询消息面板
         * @param item 消息
         */
        openMessagePanel: function (item) {

        }
    }
}
</script>

<style scoped>

.box-circle {
    height: 46px;
    width: 46px;
    line-height: 46px;
    font-size: 23px;
    display: block;
    float: left;
    text-align: center;
    margin-right: 10px;
}

.box-circle > i {
    color: #ffffff;
}
</style>
